<template>
    <view class="select-area-sub-item" @click="select">
        <text class="name">{{ subItem.Name }}</text>
        <view>
            <view class="noselect" v-if="!subItem.checked"></view>
            <view class="yesselect" v-else>
                <iconsfont customIcons="icon-dagou" :color="'#ffffff'" size="20"></iconsfont>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        subItem: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        select() {
            this.subItem.checked = !this.subItem.checked
            this.$emit("halfselect", this.subItem)
        },
    },
}
</script>

<style lang="scss">
.select-area-sub-item {
    height: 112rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx 0 76rpx;
    align-items: center;
    .name {
        color: $color-gray-1;
        font-size: 30rpx;
    }
}
.noselect {
    width: 38rpx;
    height: 38rpx;
    border: 2rpx solid #b2b2b2;
    border-radius: 8rpx;
}
.yesselect {
    width: 40rpx;
    height: 40rpx;
    background: $app-color-main;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
